<template>
  <div class="page-left" :class="!collapseLeftPanel ? 'page-left--collapse' : ''">
    <el-scrollbar height="100%">
      <template v-if="collapseLeftPanel">
        <!-- 基础 -->
        <template v-if="pageType == 'basic'">
          <left-basic
            :fromType="fromType"
            :basicData="templateData[pageType]"
            @leftBasicBack="leftBasicBack"
            @changeTheme="changeTheme"
          ></left-basic>
        </template>
        <!-- 单页 -->
        <template v-if="pageType != 'basic'">
          <left-comp
            :type="pageType"
            :index="index"
            :leng="
              templateData[pageType] && templateData[pageType].data
                ? templateData[pageType].data.length
                : 0
            "
            :theme="templateData.basic ? templateData.basic.theme : 'orange'"
            @leftCompBack="leftCompBack"
          ></left-comp>
        </template>
      </template>
    </el-scrollbar>
    <!-- 折叠 -->
    <div
      class="collapse-icon left-close sa-flex sa-row-center"
      @click="collapseLeftPanel = !collapseLeftPanel"
    >
      <el-icon v-if="collapseLeftPanel"><ArrowLeft /></el-icon>
      <el-icon v-else><ArrowRight /></el-icon>
    </div>
  </div>
</template>
<script setup>
  /**
   * @property {String} pageType 页面类型
   * @property {Object} templateData 页面数据
   * @property {Number} index 索引
   * @property {String} compType 组件类型
   */
  import { ref } from 'vue';
  import { cloneDeep, isEmpty } from 'lodash';
  import leftComp from './left-comp.vue';
  import LeftBasic from './left-basic.vue';

  const emit = defineEmits(['update:index', 'update:compType', 'pageLeftBack']);
  const props = defineProps(['fromType', 'pageType', 'templateData', 'index', 'compType']);

  // 左侧基础返回
  function leftBasicBack(data) {
    if (isEmpty(props.templateData[props.pageType])) {
      props.templateData[props.pageType] = {};
    }
    props.templateData[props.pageType][data.type] = data.template;
    emit('update:index', data.index);
    emit('update:compType', data.type);
    emit('pageLeftBack', data.template);
  }

  // 左侧组件返回
  function leftCompBack(data) {
    props.templateData[props.pageType].data;
    if (data.trigger == 'drag') {
      // 拖拽
      props.templateData[props.pageType].data.splice(data.index, 0, data.template);
      props.templateData[props.pageType].data.splice(cloneDeep(data.index) + 1, 1);
    } else if (data.trigger == 'click') {
      // 选择
      props.templateData[props.pageType].data.splice(data.index, 0, data.template);
    }
    emit('update:index', data.index);
    emit('update:compType', data.type);
    emit('pageLeftBack', data.template);
  }

  // 修改主题
  function changeTheme(data) {
    props.templateData.basic.theme = data.theme;
  }

  const collapseLeftPanel = ref(true);
</script>
<style lang="scss" scoped>
  .page-left {
    flex-shrink: 0;
    width: 260px;
    height: 100%;
    background: var(--sa-background-assist);
    box-shadow: 0px 0px 0.24rem rgb(0 0 0 / 16%);
    transition: all 0.2s;
    position: relative;
    z-index: 1;
    .left-close {
      right: -20px;
    }

    &--collapse {
      width: 0;
    }
  }
  @media only screen and (max-width: 768px) {
    .page-left {
      position: absolute !important;
      left: 0;
      z-index: 100;
      transition: transform 0.3s cubic-bezier(0.7, 0.3, 0.1, 1);
      box-shadow: 0 4px 8px 2px rgba(0, 0, 0, 0.04);
      filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.08)) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.06));

      &--collapse {
        width: 0 !important;
      }
    }
  }
</style>
<style lang="scss">
  @import './index.scss';
</style>
